import React, { FC, ReactElement, useEffect, useState } from 'react';
import { history } from 'umi';
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import './layout.less';

const list = [
  {
    title: '发现音乐',
    url: '/index',
    key: 'index',
  },
  {
    title: '我的音乐',
    url: '/home',
    key: 'home',
  },
  {
    title: '朋友',
    url: '/friend',
    key: 'friend',
  },
  {
    title: '商城',
    url: '/user',
    key: 'user',
  },
  {
    title: '音乐人',
    url: '/tag',
    key: 'tag',
  },
];

const LayoutHeader: FC = (): ReactElement => {
  const clickTarget = (k: Number) => {
    let oLi = document.querySelectorAll('li');
    oLi.forEach((item, index) => {
      oLi[index].className = '';
      if (index === k) {
        oLi[index].className = 'active-li';
        history.push(list[index].url);
      }
    });
  };

  useEffect(() => {
    let key = 0;
    list.find((item, index) => {
      if (item.url === history.location.pathname) {
        key = index;
      }
    });
    document.querySelectorAll('li')[key].className = 'active-li';
  }, []);

  return (
    <div className="header">
      <h1 className="logo">
        <img
          src="https://static-cse.canva.cn/blob/156300/1600w-EoxCgbSn8tI.jpg"
          alt="logo"
        />
      </h1>
      <ul>
        {list.map((i, k) => (
          <li
            onClick={() => {
              clickTarget(k);
            }}
            key={k}
          >
            {i.title}
          </li>
        ))}
      </ul>
      <Input
        prefix={<SearchOutlined className="site-form-item-icon" />}
        placeholder="音乐/视频/电台/用户"
        style={{ width: 200, borderRadius: '18px' }}
      />
    </div>
  );
};

export default LayoutHeader;
